<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="找回支付密码"></bar>
        <div class="youba-primary-grey" style="height: 60px; text-align: center; line-height: 60px">请输入新的支付密码</div>
        <div class="modify-pwd">
            <div class="modify-pwd-input">{{passwordArr[0]}}</div>
            <div class="modify-pwd-input">{{passwordArr[1]}}</div>
            <div class="modify-pwd-input">{{passwordArr[2]}}</div>
            <div class="modify-pwd-input">{{passwordArr[3]}}</div>
            <div class="modify-pwd-input">{{passwordArr[4]}}</div>
            <div style="border-right: 1px solid #b9b9b9;"
                 class="modify-pwd-input">{{passwordArr[5]}}
            </div>
        </div>

        <div class="mu-input-control">

            <div class="pwd-keyboard">
                <div class="pwd-keyboard-button" v-for="item in 9" :key="item" @click="inputPwd(item)">{{item}}
                </div>
                <div class="pwd-keyboard-button gray"></div>
                <div class="pwd-keyboard-button" @click="handle('0')">0</div>
                <div class="pwd-keyboard-button gray mu-e-black-color" @click="remove"><i
                    class="ion ion-backspace-outline"></i></div>
            </div>
        </div>

        <confirm v-model="isShow" class="confirm-box re-confirm" confirmText="确定" @on-confirm="handle">
            确定修改？
        </confirm>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        lang
    } from 'muka'
    import {
        Bar,
        MInput,
    } from 'muka-ui'
    import {
        Group,
        XButton,
        Msg,
        Confirm
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton,
            Msg,
            Confirm
        },
        created: function () {
        },
        data: function () {
            return {
                newPassword: '',
                passwordArr: [],
                isShow: false,
            }
        },
        computed: mapState([
            VUEX_NAME.verifySessionId,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateVerifySessionId,
            ]),
            inputPwd: function (value) {
                if (this.passwordArr.length < 6) {
                    this.passwordArr.push(value)
                }
                if (this.passwordArr.length >= 6) {
                    this.isShow = true
                }
            },
            remove: function () {
                this.passwordArr.pop()
            },

            handle: function () {
                this.$ajax(
                    'safe/findPayPwdThree',
                    {
                        newPassword: md5(this.passwordArr.join('')),
                        verifySessionId: this.verifySessionId
                    },
                    (content) => {
                        this.$router.go(-2)
                    }, true, true)
                this.isShow = false
            }
        }
    }

</script>
<style lang="less">
    .myInfo-confirm {
        .weui-dialog__btn_default {
            display: none;
        }
    }

    .modify-pwd {
        display: flex;
        justify-content: center;
    }

    .modify-pwd-input {
        height: 40px;
        top: 1px;
        border: 1px solid #b9b9b9;
        border-right: 0;
        width: 40px;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
    }

    .pwd-keyboard {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        border-right: 1px solid #ebebeb;
        border-top: 1px solid #ebebeb;
    }

    .pwd-keyboard .pwd-keyboard-button {
        flex-grow: 1;
        border: 1px solid #ebebeb;
        width: 30%;
        display: block;
        height: 60px;
        border-top: 0px;
        border-right: 0px;
        background-color: white;
        line-height: 60px;
        text-align: center;
    }

    .pwd-keyboard .gray {
        background: #dfdfdf;
    }

    .pwd-keyboard .pwd-keyboard-button:active {
        background-color: #ececec;
    }
</style>
